<template>
    <div class="container">
        <header></header>
        <div class="content">
            <div class="left-bar">
                <button @click="send">发送消息</button>
            </div>
            <div class="content-box">
                <iframe width="90%" ref="iframeRef" height="90%" src="http://localhost:5174/"></iframe>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue"

const iframeRef = ref<HTMLIFrameElement>()
onMounted(() => {
    const iframe = iframeRef.value
    iframe?.addEventListener("load", () => {
        iframe.contentWindow.postMessage("这是一个消息", "*")
    })


})
function send() {

    console.log("发送消息");

}
</script>

<style lang="scss" scoped>
.container {
    position: absolute;
    inset: 0;
}

header {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: #3498db;
    width: 100%;
    height: 70px;
}

.content {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 888;
    display: flex;
}

.left-bar {
    padding-top: 100px;
    background-color: #ff7675;
    width: 100px;
    height: 100%;
}

.content-box {
    position: relative;
    width: calc(100% - 100px);
    margin-top: 70px;
    height: calc(100% - 70px);
    background-color: #9c88ff;

    & iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>